<!--
    Exception 个人信息卡片
    @Author: zouwf
    @Date: 2019-12-10
-->
<template>
    <div class="u-infomation-card">
        <!--主要部分-->
        <div class="u-infomation-card-head">
            <img :style="{ width: width + 'px', height: height + 'px' }" class="u-infomation-card-img" :src="url" />
            <div class="u-infomation-card-content">
                <div class="u-infomation-card-content-text">
                    <span>{{ name }}</span>
                    <span>{{ sex }}</span>
                </div>
                <div class="u-infomation-card-content-text-id">{{ id }}</div>
            </div>
            <span
                class="u-infomation-card-label"
                :class="{ 'is-active-notpass': status === '不通过', 'is-active-pass': status === '通过' }"
                >{{ status }}</span
            >
        </div>
    </div>
</template>

<script>
export default {
    name: "index",
    props: {
        //姓名
        name: {
            type: String,
            default: ""
        },
        //性别
        sex: {
            type: String,
            default: ""
        },
        //身份证号
        id: {
            type: [String, Number],
            default: ""
        },
        //图片地址
        url: {
            type: String,
            default: "/static/themes/images/test.png"
        },
        //状态
        status: {
            text: String,
            default: "不通过"
        },
        //宽
        width: {
            text: [String, Number],
            default: ""
        },
        //高
        height: {
            text: [String, Number],
            default: ""
        }
    }
};
</script>
<style lang="scss" >
    .u-infomation-card{
        display: inline-block;

        &-head{
            display: inline-block;
            position: relative;
            border-radius: 1px;
            /*width: 172px;*/
            height: 222px;

            img{
                width: 100%;
                height: 100%;
            }
        }

        &-content{
            height: 52px;
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            font-size: 12px;
            color: #ffffff;
            padding: 6px 0 9px 0;
            box-sizing: border-box;

            &-text{
                text-align: center;
                &-id{
                    margin-top: 5px;
                }
            }
        }

        &-right{
            display: inline-block;
            border: 1px solid red;
            vertical-align: top;
        }

        &-label{
            position: absolute;
            right: -15px;
            top: 118px;
            border-radius: 5px;
            text-align: center;
            height: 20px;
            width: 55px;
            line-height: 20px;
            font-size: 12px;
            -webkit-transform: rotate(-30deg);
            transform: rotate(-18deg);
        }

        .is-active-pass{
            border: 1px solid #6699ff;
            color: #6699ff;
        }

        .is-active-notpass{
            border: 1px solid #ff0000;
            color: #ff0000;
        }
    }
</style>